<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  适配器模式
  <script>
    // 适配器案例
    /* 
        var googleMap = {
          show: function() {
            console.log(1);
          }
        }
        // 一开始是show方法，后期改成display方法 这就需要适配器
        var baiduMap = {
          // show: function() {
          //   console.log(1);
          // }
          display: function() {
            console.log(1);
          }
        }

        var renderMap = function(map) {
          if (map.show instanceof Function) {
            map.show()
          }
        };
        // 适配器 百度地图的渲染接口名发生了变换但是对我们的业务没印象
        var baiduMapAdapter = {
          show: function() {
            return baiduMap.display()
          }
        }

        renderMap(googleMap)
        renderMap(baiduMapAdapter)
         */


    // 适配器应用
    var getBeijingCity = function () {
      var beijingCity = [{
          name: 'chaoyang',
          id: 1
        },
        {
          name: 'haidian',
          id: 2
        }
      ]

      return beijingCity;
    }
    var render = function (fn) {
      console.log('渲染背景地图');
      console.log(JSON.stringify(fn()));
    }
    // render(getBeijingCity)

    // 如果数据源需要更换成下面这样，再不改变业务的情况下需要引入适配器
    // var beijing = {
    //   chaoyang: 1,
    //   haidian: 12
    // }

    // 适配器
    var addressAdapter = function (oldAddress) {
      var address = {},
      oldAddress = oldAddress(),
      item;

      for (var i = 0; i < oldAddress.length; i++) {
        item = oldAddress[i]
        address[item.name] = item.id
      }
      return function () {
        return address
      }
    }

    render(addressAdapter(getBeijingCity))

    
  </script>
</body>

</html>